<template>
  <div id="watch" v-if="data">
    <!-- 导航窗格 -->
    <!-- ；立即选购链接 -->
    <div class="choose_link">
      <p>
        7 月 29 日至 8 月 1 日，Apple Watch SE 限时优惠，以指定方式支付立省 RMB
        200*。
      </p>
      <a href="">进一步了解></a>
    </div>
    <!---------------------- 新款SERIRS7 全屏先手 一楼区域------------------------>
    <div class="New_Watch">
      <div class="New_Watch_center">
        <div class="New_Watch1">
          <div class="New_Watch1_1">
            <div>
              <img :src="data[`logo_watch_s7__dnxp9zoaom82_medium.png`]" />
            </div>
            <div>全屏先手</div>
            <h6>RMB 2999 起</h6>
            <div class="but">
              <button>
                <router-link to="/watchS7">购买</router-link>
              </button>
              <div>
                <a href="#">进一步了解 > </a>
              </div>
            </div>
          </div>
          <div class="New_Watch1_2">
            <img :src="data[`hero_s7__ep2maoos292e_large.jpg`]" />
          </div>
        </div>
      </div>
    </div>
    <!------------------------------ 二楼区域结构 ------------------------------>
    <!-- WATCH SE 事事拿手 轻松入手 -->
    <div class="New_Watch2">
      <div class="New_Watch2center">
        <div class="New_Watch2_1">
          <div class="New_Watch2_1_1">
            <div class="img2_1">
              <img :src="data[`display_s7__fj2bqp6brfiy_large.jpg`]" />
            </div>
            <div class="img2_2">
              <div>更大的显示屏</div>
              <h4>
                屏幕区域
                <br />
                比Series3
                <br />
                增大超过
                <br />
                50%
              </h4>
              <div>Series7/Series3</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!------------------------------ 三楼区域结构 ------------------------- -->
    <div class="New_Watch3">
      <div class="New_Watch3center">
        <div class="New_Watch3_1">
          <div class="New_Watch3_1_1">
            <div class="New_Watch3_1_1_1">
              <div class="New_Watch3_1_1_1_1">
                <div>
                  <img
                    :src="data[`logo-watch-se__soyna2pegxeq_large.png`]"
                  />
                </div>
                <div>
                  事事拿手
                  <br />
                  轻松入手
                </div>
                <h6>RMB 2999 起</h6>
                <div class="but">
                  <button>
                    <router-link to="/watchS7">购买</router-link>
                  </button>
                  <div>
                    <a href="#">进一步了解 > </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="New_Watch3_1_1_2">
              <div class="New_Watch3_1_1_2_1">
                <div>
                  <img :src="data[`tile-watch-se__knji2d25x8qe_large.jpg`]" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!------------------------------ 四楼Watch款式比较区域 ----------------------->
    <div class="Watchtype">
      <div class="type_center">
        <h2 class="watch4type1">哪款 Apple Watch 适合你</h2>
        <div class="item">
          <ul>
            <!-- 大图区域 -->
            <li>
              <a href="">
                <img
                  :src="data[`compare_s7__dqi9jnwa4sq6_large.jpg`]"
                  alt=""
                />
              </a>
              <div class="circle">
                <img
                  :src="data[`swatch_iphone_12__e9bv45wax2ie_small_2x.png`]"
                />
              </div>
              <h4>Apple Watch Series 7</h4>
              <span>RMB 2999 起</span>
              <button >
                <router-link to="/watchS7">购买</router-link>
              </button>
              <a href="">进一步了解></a>
            </li>
            <li>
              <a href="">
                <img
                  :src="data[`compare_s7__dqi9jnwa4sq6_large.jpg`]"
                  alt=""
                />
              </a>
              <div class="circle">
                <img
                  :src="data[`swatch_iphone_12__e9bv45wax2ie_small_2x.png`]"
                />
              </div>
              <h4>Apple Watch SE</h4>
              <span>RMB 2999 起</span>
              <button>
                <router-link to="/watchSE">购买</router-link>
              </button>
              <a href="">进一步了解></a>
            </li>
            <li>
              <a href="">
                <img
                  :src="data[`compare_s7__dqi9jnwa4sq6_large.jpg`]"
                  alt=""
                />
              </a>
              <div class="circle">
                <img
                  :src="data[`swatch_iphone_12__e9bv45wax2ie_small_2x.png`]"
                />
              </div>
              <h4>Apple Watch Series 3</h4>
              <span>RMB 1499 起</span>
              <button>
                <router-link to="watch3">购买</router-link>
              </button>
              <a href="">进一步了解></a>
            </li>
            <!-- 小图区域-->
            <li>
              <h3>45 毫米或 41 毫米</h3>
              <h2>游泳适用1</h2>
              <h2>抗裂性能出众的表镜</h2>
              <h2>经认证的 IP6X 级防尘1</h2>
            </li>
            <li>
              <h3>44 毫米或 40 毫米</h3>
              <h2>游泳适用1</h2>
              <div class="clear">-</div>
              <div class="clear">-</div>
            </li>
            <li>
              <h3>42 毫米或 38 毫米</h3>
              <h2>游泳适用1</h2>
              <div class="clear">-</div>
              <div class="clear">-</div>
            </li>
            <li>
              <img
                :src="data[`quicklook_retina_display_s7__euol4grkrx8i_large.png`]"
              />
            </li>
            <li>
              <img
                :src="data[`quicklook_retina_display_s3__c28bwxqba1w2_large.png`]"
              />
            </li>
            <li>
              <img
                :src="data[`quicklook_retina_display_s3__c28bwxqba1w2_large.png`]"
              />
            </li>
            <li>
              <h2>全天候视网膜显示屏</h2>
              <h2>比 Apple Watch SE 增大近 20%</h2>
              <h2>比 Series 3 增大超过 50%</h2>
            </li>
            <li>
              <h2>视网膜显示屏</h2>
              <h2>比 Series 3 增大超过 30%</h2>
            </li>
            <li>
              <h2>视网膜显示屏</h2>
            </li>
            <li>
              <img :src="data[`quicklook_bo_app__bn0uz5oly82u_large.png`]" />
              <h2>血氧 app2</h2>
            </li>
            <li class="clear2">-</li>
            <li class="clear2">-</li>
            <li>
              <img :src="data[`quicklook_ecg_app__cha5dfocq4wi_large.png`]" />
              <h2>移动心电图房颤提示软件3</h2>
            </li>
            <li class="clear2">-</li>
            <li class="clear2">-</li>
            <li>
              <img
                :src="data[`quicklook_heart_rate_notifications__dwkylcnr0nu6_large.png`]"
              />
              <h2>心率过高或过低时的预警提示</h2>
            </li>
            <li>
              <img
                :src="data[`quicklook_heart_rate_notifications__dwkylcnr0nu6_large.png`]"
              />
              <h2>心率过高或过低时的预警提示</h2>
            </li>
            <li>
              <img
                :src="data[`quicklook_heart_rate_notifications__dwkylcnr0nu6_large.png`]"
              />
              <h2>心率过高或过低时的预警提示</h2>
            </li>
            <li>
              <img :src="data[`quicklook_sos__eevzwecgdqaa_large.png`]" />
              <h2>SOS 紧急联络5</h2>
              <h2>全球紧急呼救电话6</h2>
              <h2>摔倒检测</h2>
            </li>
            <li>
              <img :src="data[`quicklook_sos__eevzwecgdqaa_large.png`]" />
              <h2>SOS 紧急联络5</h2>
              <h2>全球紧急呼救电话6</h2>
              <h2>摔倒检测</h2>
            </li>
            <li>
              <img :src="data[`quicklook_sos__eevzwecgdqaa_large.png`]" />
              <h2>SOS 紧急联络5</h2>
              <div class="clear"></div>
              <div class="clear"></div>
            </li>
            <li class="picbot">
              <img :src="data[`quicklook_cellular__fp5gj5mokv2i_large.png`]" />
              <h2>可选蜂窝网络表款7</h2>
              <h2>家人共享设置7</h2>
              <h2>一部 iPhone 可配对多只手表87</h2>
            </li>
            <li class="picbot">
              <img :src="data[`quicklook_cellular__fp5gj5mokv2i_large.png`]" />
              <h2>可选蜂窝网络表款7</h2>
              <h2>家人共享设置7</h2>
              <h2>一部 iPhone 可配对多只手表87</h2>
            </li>
            <li class="clear2">-</li>
          </ul>
          <div class="Watchtype2">
            <a href="#">比较各款 iPad 机型 > </a>
            <a href="#">选购 iPad > </a>
          </div>
        </div>
      </div>
    </div>
    <!--------------------------------- 五楼区域结构 -------------------------------->
    <div class="Watch5">
      <div class="Watch5center">
        <div class="watch5type">
          <div class="watch5type1">
            <div>watchOS 9</div>
            <div>各种懂行，个性爆表。</div>
            <a href="#">先睹为快 > </a>
          </div>
          <div class="watch5type2">
            <img :src="data[`watchos_full__d1yx8e3refau_large.jpg`]" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!--------------------------------- 六楼样式结构 -------------------------------->
    <div class="Watch6">
      <div class="Watch6center">
        <div class="watch6type">
          <div class="watch6typecenter">
            <div class="watch6type1">
              <span>心中有</span>
              <div>
                <img
                  :src="data[`logo_pride_static__d6k5drslkiie_large.jpg`]"
                  alt=""
                />
              </div>
              <div>
                全新彩虹版表带和表盘,
                <br />
                开启多彩环腕秀。
              </div>
              <div class="pic">
                <div class="pic1">
                  <img
                    :src="data[`pride_endframe__baylqa9vo28y_large.jpg`]"/>
                  <img
                    :src="data[`pride_hw__djnzn7stsf42_large.jpg`]"
                    class="aw-img"
                  />
                  <img
                    :src="data[`pride_nike__2d5mylvtaiau_large.jpg`]"
                    alt=""
                  />
                  <img
                    :src="data[`pride_sport_loop__mbtygo28h9eq_large.jpg`]"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div class="watch6type2">
              <div class="watch6type2_1">
                <div class="watch6type2_1_1">
                  <div class="watch6type2_1_1_1">
                    <h3>新款</h3>
                    <h4>彩虹版回环式运动表带</h4>
                    <p>RMB 379</p>
                    <a href=""><button>购买</button></a>
                    <img
                      :src="data[`pride_band_sport_loop__gktby8cho2ai_large.jpg`]"
                      alt=""
                    />
                  </div>
                  <div class="watch6type2_1_1_2">
                    <h3>新款</h3>
                    <h4>彩虹版 Nike 回环式运动表带</h4>
                    <p>RMB 379</p>
                    <a href=""><button>购买</button></a>
                    <img
                      :src="data[`pride_band_nike__cbx54pduap9e_large.jpg`]"
                      alt=""
                    />
                  </div>
                </div>
                <div class="watch6type2_1_2">
                  <div class="watch6type2_1_2_1">
                    <img
                      :src="data[`pride_face__c5j6orev49ua_large.jpg`]"
                      alt=""
                    />
                    <h3>在 iPhone 上打开本页面可下载此款表盘</h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!------------------------------ 七楼样式结构 -------------------------------->
    <div class="Watch7">
      <div class="Watch7center">
        <div class="Watch7type1">
          <h2>家人共享设置</h2>
          <span
            >全家人,
            <br />
            心手相连。
          </span>
          <br />
          <span>没有 iPhone 的家人现在也能用<br />Apple Watch 保持联系。 </span>
          <div class="but">
            <button>进一步了解</button>
            <a href="#">选购 Apple Watch > </a>
          </div>
        </div>
        <div class="Watch7type2">
          <img :src="data[`family_setup__efow9dhr7owi_large.jpg`]" alt="" />
        </div>
      </div>
    </div>
    <!-------------------------------- 八楼样式结构 ------------------------------>
    <div class="Watch8">
      <div class="Watch8center">
        <div class="watch8type">
          <div>
            换购新 Apple Watch 享
            <br />
            受最高达 RMB 1200 的
            <br />
            折抵优惠<sup>9</sup>。
          </div>
          <div>
            通过 Apple Trade In 换购计划,你可以用符合条件的
            <br />
            Apple Watch 来换购，享受折抵优惠。这样一来,
            <br />
            你受益，地球也受益。
          </div>
          <div>
            <a href="#">了解你设备的折抵金额 > </a>
          </div>
        </div>
      </div>
    </div>
    <!--------------------------------- 九楼样式结构 ----------------------------->
    <div class="Watch9">
      <div class="Watch9center">
        <div class="watch9type">
          <h2>Apple Watch 定制坊</h2>
          <span>选款表壳,配款表带,<br />风格任你自创。</span>
          <button>打造你的风格</button>
          <p>
            <img :src="data[`cto-bands__bysbdvo14i02_large.jpg`]" alt="" />
          </p>
        </div>
      </div>
    </div>
    <!-------------------------------- 十楼样式结构 ---------------------------->
    <div class="Watch10">
      <div class="Watch10center">
        <div class="watch10type1">
          <h2>Apple Watch 哪里好</h2>
          <span>健康生活的好拍档,<br />非它莫属。</span>
          <button>进一步了解 ></button>
          <img :src="data[`tile_why_watch__bzxlfokkvj36_large.jpg`]" alt="" />
        </div>
        <div class="watch10type2">
          <h2>watchOS 8</h2>
          <p>发掘内在，实力跳级。</p>
          <button>进一步了解 ></button>
          <img :src="data[`tile_watchos__fo0tafi6nn6u_large.jpg`]" alt="" />
        </div>
      </div>
    </div>
    <!---------------------------------- 十一楼 ---------------------------------->
    <div class="Watch11">
      <div class="Watch11center">
        <div>Apple Watch 精彩配件</div>
      </div>
    </div>
    <!---------------------------------- 十二楼 ---------------------------------->
    <div class="Watch12">
      <div class="Watch12center">
        <div class="watch12type1">
          <h2>圈粉新花色</h2>
          <button>选购新款表带 ></button>
          <img :src="data[`tile_bands__4x5zbcsqc1ua_large.jpg`]" alt="" />
        </div>
        <div class="watch12type2">
          <h2>全系列,<br />各有妙处。</h2>
          <p>了解各款 AirPods,<br />看看哪款更合你心意。</p>
          <button>进一步了解 ></button>
          <img :src="data[`airpods__cldonwj5wwya_large.jpg`]" alt="" />
        </div>
      </div>
    </div>
    <!----------------------------------- 十三楼 -------------------------------->
    <div class="Watch13">
      <div class="Watch13center">
        <div class="watch13type1">
          <h3>免费送货</h3>
          <div>享受送货上门服务,或前往<br />Apple Store 零售店提取。</div>
          <button>进一步了解 ></button>
        </div>
        <div class="watch13type2">
          <h3>分期付款</h3>
          <div>符合条件的信用卡用户可选择<br />灵活的分期付款</div>
          <button>进一步了解 ></button>
        </div>
        <div class="watch13type3">
          <h3>获得购买帮助</h3>
          <div>
            有问题吗？致电 Specialist 专家或进<br />行在线交流。<br />致电
            400-666-8800
          </div>
          <button>联系我们 ></button>
        </div>
      </div>
    </div>
    <!------------------------------------ 十四楼 ------------------------------->
    <div class="watch14">
      <div>尽享 Apple Watch 的精彩</div>
    </div>
    <!------------------------------------ 十五楼 ------------------------------->
    <div class="watch15">
      <div class="watch15center">
        <div class="watch15type">
          <div class="watch15type1">
            <div class="type15_1_1">
              <img :src="data[`logo__dcojfwkzna2q_large.png`]" alt="" />
              <div>好歌数千万,马上免费试听。</div>
              <button>开始试用<sup>10</sup> ↗</button>
              <button>进一步了解 ></button>
            </div>
            <div class="lbt">
              <div class="lbtcenter">
                <ul>
                  <li><img :src="data[`259x259bb(1).jpg`]" alt="" /></li>
                  <li><img :src="data[`Watch-img/259x259bb (1).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (2).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (3).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (4).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (5).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (6).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (7).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (9).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (10).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (11).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (12).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (13).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (14).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (15).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (16).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (17).jpg`]" alt="" /></li>
                  <li><img :src="data[`259x259bb (18).jpg`]" alt="" /></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="watch15type2">
            <div>三个圆环,圆一个目标。</div>
            <button>了解如何填满 Apple Watch 的</button>
            <button>健身记录圆环 ></button>
            <div>
              <img :src="data[`tile_rings__b6fsb8eh4j36_large.jpg`]" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--------------------------------- 十六楼结构 ------------------------------------>
    <div class="watch16">
      <div class="watch16center">
        <div class="watch16type1">
          <div>健康 App</div>
          <div>现在，健康 app 迎来又一次大踏步更新。</div>
          <button>进一步了解 ></button>
        </div>
        <div class="watch16type2">
          <img :src="data[`tile_health__exde7a2pwjau_large.jpg`]" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    getData() {
      let url = "http://localhost:3000/SCHImg";
      axios.get(url).then((res) => {
        this.data = res.data;
        console.log(res.data);
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
#watch {
  width: 100%;
  height: 100%;
}
</style>
<style scoped src="../assets/css/watch.css"></style>